<template>
  <div>
    <div v-if="showModal" class="mask" @click="showModal=false" />
    <div v-if="showModal" class="pop">
      <!-- <button class="btn" @click="showModal=false">点击出现弹框11</button> -->
      <div class="search-box">
        <el-form ref="form" :model="form" label-width="80px" class="">
          <el-form-item label="语种">
            <el-select v-model="form.region" placeholder="请选择">
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="国家">
            <el-select v-model="form.region" placeholder="请选择">
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="站点">
            <el-select v-model="form.region" placeholder="请选择">
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="图片附件">
            <el-select v-model="form.region" placeholder="请选择">
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="活动时间">
            <el-col :span="11">
              <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%;" />
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%;" />
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <button class="btn" @click="showModal=true">高级查询</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
      this.showModal = false
    }
  }
}
</script>

<style scoped>
.search-box{
  padding: 16px 24px;
}
.mask {
  background-color: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1
}
.pop {
  background-color: #fff;
  position: fixed;
  top: 100px;
  right: 10px;
  z-index: 2;
  /* left: 300px;
  width: calc(100% - 600px);
  height:calc(100% - 200px); */

}
.btn {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid blue;
  padding: 4px 12px;
  margin-left: 80%;
  margin-top: 10px;
}
</style>
